<template>
    <li class="fdx-media-item" :class="['fdx-media-item--'+ dir]">
        <div class="media-left" v-if="dir === 'left-to-right'">
            <slot name="left"></slot>
        </div>
        <div class="media-body" v-if="dir === 'left-to-right'">
            <slot name="right"></slot>
        </div>
        <div class="media-header" v-if="dir === 'top-to-bottom'">
            <slot name="top"></slot>
        </div>
        <div class="media-body" v-if="dir === 'top-to-bottom'">
            <slot name="bottom"></slot>
        </div>
    </li>

</template>

<script>
export default {
    name: 'MediaItem',
    props: {
        dir: {
            type: String,
            default: 'left-to-right' // 2中类型，left-to-right/top-to-bottom
        }
    }
}
</script>

<style lang="scss">
@import './media';
</style>